<template>
  <div class="cart">
    <!-- 导航 -->
    <nav-bar class="cart-nav">
      <template v-slot:center>
        <div>购物车({{length}})</div>
      </template>
    </nav-bar>

    <!-- 商品的列表 -->
    <cart-list/>

    <!-- 底部汇总 -->
    <cart-bottom-bar/>
  </div>
</template>

<script>
import navBar from 'components/common/navbar/navbar'

import cartList from './childComps/cart_list.vue'
import cartBottomBar from './childComps/cart_bottom_bar.vue'

import { mapGetters } from 'vuex'

export default {
  name: "cart",
  components: {
    navBar,
    cartList,
    cartBottomBar
  },
  computed: {
    // 两种语法
    ...mapGetters({
      length: 'cartLength',
    })
  }
}
</script>

<style scoped>
  .cart {
    height: 100vh;
  }

  .cart-nav {
    background-color: var(--color-tint);
    color: #fff;
  }
</style>
